<template>
    <div>
        <ZkModalVue class="class-edit" :title="title" :size="'md'" :visible="visible" @cancel="handleCancel" @ok="handleOk">
            <a-form-model ref="form" :model="info" v-bind="formLayout" :rules="rules">
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="分类代码" prop="code">
                            <a-input v-model="info.code" :maxLength="50" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="分类名称" prop="name">
                            <a-input v-model="info.name" :maxLength="20" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="分类图片" prop="picUrl" :labelCol="formLayout1.labelCol" :wrapperCol="formLayout1.wrapperCol">
                            <a-input v-model="info.picUrl" :maxLength="2000" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="分类状态" prop="status">
                            <ZkSelect v-model="info.status" :options="getStatusOpts"></ZkSelect>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="上级分类" prop="parentId">
                            <a-input v-model="info.parentName" read-only @click="showSelectCategory">
                                <a-icon type="ellipsis" slot="addonAfter"/>
                            </a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </ZkModalVue>
        <SelectCategory ref="selectCategory"></SelectCategory>
    </div>
</template>
<script>
    import ZkModalVue from '@/appBase/ZkModal.vue';
    import ZkSelect from '@/appBase/ZkSelect.vue';
    import { lenRule, notEmptyRule } from '@/appBase/formRules';
    import { getStatusOpts } from '@/modules/common/service/base';
    import { BaseStatusEnum } from '@/modules/common/enum/enum';
    import { addCategoryTreeNode, queryCategoryTreeNode, updateCategoryTreeNode } from '@/api/common';
    import SelectCategory from '@/modules/common/components/select/SelectCategory.vue';

    export default {
        name: "CategoryEdit",
        components: {
            ZkModalVue,
            ZkSelect,
            SelectCategory
        },
        data() {
            return {
                title: '分类修改',
                pageLoading: false,
                visible: false,
                /** 布局配置 */
                formLayout: {
                    layout: 'horizontal',
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 8 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 14 }
                    }
                },
                formLayout1: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 4 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 19 }
                    }
                },
                id: null,
                info: {
                    code: null,
                    id: 0,
                    name: null,
                    parentId: 0,
                    /** 图片地址 */
                    picUrl: "",
                    type: 0,
                    status: BaseStatusEnum.ENABLE,
                    parentName:''
                },
                rules: {
                    code: [ notEmptyRule(), lenRule({ max: 50 })],
                    name: [ notEmptyRule(), lenRule({ max: 20 })],
                    picUrl: [ lenRule({ max: 2000 })],
                    status: [notEmptyRule()]
                }
            }
        },
        methods: {
            /**
             * 显示
             * @param {Object} param
             * @param {String} param.id
             * @param {String} param.parentId
             */
            show(param) {
                this.id = param.id||null;
               
                this._onOk = param.onOk;
                this._onCancel = param.onCancel;
                this.visible = true;
                
                this.$nextTick(() => {
                    this.$refs.form.resetFields();
                    this.info.id = this.id;
                    this.info.parentId = param.parentId;
                    this.info.parentName = param.parentName;
                    this.info.type = param.type;
                    if (this.id) {
                        this.title = '分类修改';
                        queryCategoryTreeNode({ id: this.id }).then((result) => {
                            Object.assign(this.info, result);
                        });
                    } else {
                        this.title = '分类新增';
                    }
                })
            },
            handleOk() {
                this.$refs.form.validate(async (valid) => {
                    console.log(valid);
                    if (!valid) return;
                    const param = this.info;
                    if (this.id) {
                        await updateCategoryTreeNode(param);
                    } else {
                        await addCategoryTreeNode(param);
                    }
                    this.visible = false;
                    if (this._onOk) this._onOk();
                })
            },
            handleCancel() {
                this.visible = false;
                if (this._onCancel) this._onCancel();
            },
            showSelectCategory(){
                this.$refs.selectCategory.show({
                    type:this.info.type,
                    onOk:(val)=>{
                        this.info.parentId = val.key;
                        this.info.parentName = val.title;
                    }
                })
            },
            getStatusOpts
        }
    }
</script>